<template>
  <div class="indexTopWrap">
    <!-- 栏目切换 -->
    <div class="switchBtn">
      <label>&lt;</label>
      <span>&gt;</span>
    </div>
    <!-- 搜索音乐 -->
    <div class="searchMusic">
      <input
        class="inputSearchMusic"
        type="text"
        placeholder="搜索音乐"
        title="输入关键字搜索"
      />
    </div>
    <!-- 听歌识曲 -->
    <div class="listenTosong" title="听歌识曲"></div>
    <!-- 顶部,右侧按钮,右浮动 -->
    <div style="float: right">
      <!-- 用户头像,用户名 -->
      <div class="userAvatar_Name">
        <label></label>
        <span>Sloan-Li的音乐宝库</span>
      </div>
      <!-- level icon -->
      <div class="level_icon" title="尽享绿钻特选,彰显不一样的你"></div>
      <!-- 下箭头 -->
      <div class="arrow_down" title="用户信息"></div>
      <!-- 换肤 -->
      <div class="skin_icon" title="换肤"></div>
      <!-- 主菜单 -->
      <div class="menu_icon" title="主菜单"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexTopTitle",
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped>
.indexTopWrap {
  width: 100%;
  height: 60px;
  background-color: #f6f6f6;
}
.indexTopWrap .switchBtn {
  width: auto;
  height: 60px;
  line-height: 60px;
  float: left;
  margin-left: 15px;
}
/* 左箭头 */
.indexTopWrap .switchBtn label,
.indexTopWrap .switchBtn span {
  color: #aeaeae;
  font-size: 20px;
  padding: 0 10px;
  cursor: pointer;
}
.indexTopWrap .switchBtn label:hover,
.indexTopWrap .switchBtn span:hover {
  color: #1fd4ae;
}
/* 搜索音乐 */
.indexTopWrap .searchMusic {
  float: left;
  margin-left: 20px;
}
.searchMusic input.inputSearchMusic {
  width: 120px;
  height: 33px;
  background-color: #e3e3e3;
  border-radius: 50px;
  border: 0;
  margin-top: 15px;
  padding-left: 40px;
  /* 添加背景搜索图片 */
  background-image: url(../assets/放大镜.png);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: 18px center;
}
/* 听歌识曲 */
.listenTosong {
  width: 20px;
  height: 20px;
  float: left;
  margin: 22px 0 0 17px;
  cursor: pointer;
  /* 听歌识曲背景图 */
  background-image: url(../assets/听歌识曲.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
}

.listenTosong:hover {
  background-image: url(../assets/听歌识曲2.png);
}
/* 用户头像,用户名 */
.userAvatar_Name {
  height: 24px;
  float: left;
  margin: 19px 11px 0 0;
  cursor: pointer;
}
.userAvatar_Name label {
  float: left;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #f00;
  margin: 0 12px 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../assets/avator.jpg);
}
.userAvatar_Name span {
  float: left;
  width: 80px;
  height: 24px;
  line-height: 24px;
  /* 单行文本溢出隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* level_icon */
.level_icon {
  width: 34px;
  height: 16px;
  float: left;
  background: url(../assets/level.png);
  margin: 22px 9px 0 0;
  cursor: pointer;
}
/* arrow_down */
.arrow_down {
  width: 14px;
  height: 12px;
  float: left;
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../assets/arrow_down.png);
  margin: 22px 15px 0 0;
  cursor: pointer;
}
/* skin_icon */
.skin_icon {
  width: 14px;
  height: 13px;
  float: left;
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../assets/skin_icon.png);
  margin: 24px 15px 0 0;
  cursor: pointer;
}
/* menu_icon */
.menu_icon{
  width: 15px;
  height: 13px;
  float: left;
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../assets/menu_icon.png);
  margin: 24px 15px 0 0;
  cursor: pointer;
}
</style>
